<template>
  <div :id="`wft-web-loading${compId}`" class="wft-web-loading" :style="loadingContainer"></div>
</template>
<script setup lang="ts" name="web-loading">
import { computed, onMounted, onUnmounted } from 'vue'
import type { LoadingType } from 'web-loading'
import { initLoading, LOADING_TYPES, MODEL_TYPES } from 'web-loading'
import { useLoadingDefOptions } from '@/hooks'

const props = withDefaults(defineProps<{
  compId?: '';
  height?: number | string;
  type?: LOADING_TYPES;
  extendClass?: string | null | undefined;
  model?: MODEL_TYPES;
  html?: string;
  text?: string;
  textGap?: number;
  fontSize?: number;
  fontFamily?: string;
  delay?: number;
  delayInto?: number;
  notFeel?: number;
  optimization?: boolean;
  zIndex?: string;
  themeColor?: string;
  bgColor?: string;
  shadowColor?: string;
  shadowOffsetX?: number;
  shadowOffsetY?: number;
  shadowBlur?: number;
  pointerEvents?: boolean;
  toast?: boolean;
  [PropName: string]: any
}>(), {
  height: 150,
  compId: '',
  ...useLoadingDefOptions()
})

const webLoading: LoadingType = initLoading({
  type: props.type,
  extendClass: props.extendClass,
  model: props.model,
  html: props.html,
  text: props.text,
  textGap: props.textGap,
  fontSize: props.fontSize,
  fontFamily: props.fontFamily,
  delay: props.delay,
  delayInto: props.delayInto,
  notFeel: props.notFeel,
  optimization: props.optimization,
  zIndex: props.zIndex,
  themeColor: props.themeColor,
  bgColor: props.bgColor,
  shadowColor: props.shadowColor,
  shadowOffsetX: props.shadowOffsetX,
  shadowOffsetY: props.shadowOffsetY,
  shadowBlur: props.shadowBlur,
  pointerEvents: props.pointerEvents,
  toast: props.toast
})

onMounted(() => {
  let loadingDom = document.getElementById(`wft-web-loading${props.compId}`)
  webLoading.loading(loadingDom)
})
onUnmounted(() => {
  webLoading.close()
})

let loadingContainer = computed(() => ({ height: props.height + 'px' }))
</script>
<style scoped>
.wft-web-loading {
  width: 100%;
}
</style>